<script>
import axios from "axios";

export default {
  name: "Management",
  data() {
    return {
      AllReserveRooms:[],
      pageDto: {
        pageNum: 1,
        pageSize: 5,
        data:{
          startTime:'',
          endTime:'',
          userId:'',
          roomId:''
        }
      },
      total: 0,
      pages: 0,
      roomList:[],
      users:[],
      rooms:[]
    }
  },
  methods: {
    //获取所有用户
    getAllUser() {
      axios.post("/oa/users/getAllUser",this.pageDto).then((res) => {
        this.users = res.data.data.list;
      })
    },
    //获取所有会议室
    getAllRoom() {
      axios.post("/oa/room/getAllRoom",this.pageDto).then((res) => {
        this.rooms = res.data.data.list;
      })
    },
    //获取所有预定会议室
    getAllList() {
      axios.post("/oa/room/getAllReserveRoom",this.pageDto).then((res) => {
        this.pageDto.pageNum = res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
        this.pages = res.data.data.pages;
        this.AllReserveRooms = res.data.data.list;
      })
    },
    //复选框
    handleSelectionChange(val){
      this.updateIds = val
      this.updateIds = val.map(item=>item.bookingId)
    },
    //取消预定
    cancel() {
      this.$confirm('确定取消吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(`/oa/room/cancelBooking`, this.updateIds)
            .then(() => {
              this.$message({
                type: 'success',
                message: '取消成功!'
              });
              this.getAllList();
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )
    }
  },
  created() {
    this.getAllUser();
    this.getAllRoom();
    this.getAllList();
  },
}
</script>

<template>
  <div class="titleBox">
    会议室预定管理
  </div>
  <div>
    <div class="block" >
      <el-date-picker  @change="getAllList()"
          v-model="this.pageDto.data.startTime"
          type="datetime"
          placeholder="预定开始时间"
      />
      <span class="demonstration">To</span>
      <el-date-picker @change="getAllList()"
                      v-model="this.pageDto.data.endTime"
                      type="datetime"
                      placeholder="预定结束时间"
      />
      <el-select v-model="this.pageDto.data.userId" placeholder="预定人" style="width: 240px" @change="getAllList">
        <el-option
            label="全部预定人"
            value=""
        />
        <el-option
            v-for="user in this.users"
            :value="user.userId"
            :label="user.realName"
        />
      </el-select>
      <el-select v-model="this.pageDto.data.roomId" placeholder="房间名" style="width: 240px" @change="getAllList">
        <el-option
            label="全部会议室"
            value=""
        />
        <el-option
            v-for="room in this.rooms"
            :label="room.roomName"
            :value="room.roomId"
        />
      </el-select>
    </div>
  </div>
  <el-table :data="this.AllReserveRooms" style="width: 100%"  @selection-change="handleSelectionChange">
    <el-table-column  type="selection" width="50"></el-table-column>
    <el-table-column label="会议室名称">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.roomName}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会议室开始时间">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.bookingTime}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会议室结束时间">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.reservationEnd }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="会议室用途">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.reason }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="预定人">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{scope.row.realName}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="预定时间">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.createdAt }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页-->
  <el-pagination
      v-model:current-page="this.pageDto.pageNum"
      :page-size="this.pageDto.pageSize"
      :pager-count="this.pages"
      layout="prev, pager, next"
      :total="this.total"
      @current-change="getAllList"
  />
  <el-button type="primary" @click="cancel()"> 取消预定</el-button>
</template>

<style scoped lang="less">
</style>
